<template>
	<view class="haderbb" :style="{'background':back1}">
		<image :src="img" mode="" class="haderbbimg"></image>
		<view class="header" :style="{'margin-top':statusBarHeight+'px','height':barHeight+'px'}">
			<image
				:src="str1=='oridei'?'https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(28).png':'https://39gongli.oss-cn-beijing.aliyuncs.com/static/微信图片_20250427102430.png'"
				mode="" class="header_back" v-if="pagetype!='home'" @click="back"></image>
			<view class="header_title" :style="{'color':str1=='oridei'?'#000':''}">
				{{title}}
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue'
	const statusBarHeight = ref(0)
	const barHeight = ref(0)
	const emit = defineEmits(['backClick']);
	import {
		onMounted,
		onUnmounted
	} from 'vue'
	const props = defineProps({
		title: {
			type: [String],
			default: ''
		},
		back1: {
			type: [String],
			default: ''
		},
		img: {
			type: [String],
			default: ''
		},
		str1: {
			type: [String],
			default: ''
		},
		str: {
			type: [String],
			default: ''
		},
		pagetype: {
			type: [String],
			default: ''
		},
		typestr: {
			type: [String],
			default: ''
		},
	});

	onMounted(() => {
		console.log('我创建了', uni.getSystemInfoSync().statusBarHeight, wx.getMenuButtonBoundingClientRect());
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		const {
			top,
			height
		} = wx.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;

	})
	const back = () => {
		if (props.title == '租赁订单' || props.title == '营位订单' || props.title == '商城订单') {
			uni.switchTab({
				url: '/pages/my/index'
			})
			return
		}

		if (props.pagetype == 'home') {
			uni.navigateTo({
				url: '/sub_home/home/search?typestr=' + props.typestr
			})
			return
		}
		emit('backClick')

		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.readuce {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.14);
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		border-radius: 50%;
		margin-left: 29rpx;

		.readuceimg {
			width: 32rpx;
			height: 32rpx;

		}
	}

	.haderbb {
		width: 100%;
		overflow: hidden;
		position: fixed;
		z-index: 999;
		transition: 1s;
	}

	.haderbbimg {
		width: 100%;
		z-index: -2;
		position: absolute;
	}

	.header {
		width: 100%;
		height: var(--status-bar-height);
		// height: 64rpx;
		// overflow: hidden;
		// margin-top: 100rpx;
		margin-bottom: 14rpx;
		display: flex;
		align-items: center;
		position: relative;

		&_back {
			width: 44rpx;
			height: 44rpx;
			position: absolute;
			margin-left: 29rpx;
		}

		&_title {
			font-family: PingFang SC-Bold;
			font-size: 36rpx;
			color: #FFFFFF;
		}
	}

	.header_title {
		width: 100%;
		text-align: center;
	}
</style>